<template>
  <div @click="selectSlideUp2">
    <div class="yx-tabBar clearfix">
      <router-link to="item" class="fl yx-tab yx-freeze yx-active">
        物料分类
      </router-link>
      <router-link to="supplier" v-if="role_id!=4&&role_id!=5" class="fl yx-tab yx-freeze">
        供应商分类
      </router-link>
      <router-link to="relative" v-if="role_id!=4&&role_id!=5" class="fl yx-tab yx-freeze">
        关联分析
      </router-link>
    </div>
    <div class="yx-condition clearfix">
      <div class="yx-form-item clearfix">
        <div class="yx-form-inline">
          <label class="yx-form-label">库存大类</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_item_big_class_input_delete" @click="inputClear('query_get_item_big_class_input','yxBigClass','yxBigClassID')">X</div>
            <input type="text" v-model="query_get_item_big_class_input"
                   @click.stop="selectClick('query_get_item_big_class')">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_item_big_class">
                <li v-for="item in query_get_item_big_classData" @click="choose_get_item_big_classFun(item.name,item.value)">
                  <nobr>{{item.value}} {{item.name}}</nobr>
                </li>
                <li v-show="query_get_item_big_classFunING">加载中...</li>
                <li v-show="!query_get_item_big_classFunING&&query_get_item_big_classData.length==0">空</li><!--@click="choose_get_item_big_classFun('','')"-->
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline" :class="{'yx-cur': disabledInput}">
          <label class="yx-form-label">库存小类</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_item_small_class_input_delete" @click="inputClear('query_get_item_small_class_input','yxSmallClass','yxSmalligClassID')">X</div>
            <input type="text" v-model="query_get_item_small_class_input"
                   @click.stop="selectClick('query_get_item_small_class')" v-bind:disabled="disabledInput">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_item_small_class">
                <li v-for="item in query_get_item_small_classData" @click="choose_get_item_small_classFun(item.name,item.value)">
                  <nobr>{{item.value}} {{item.name}}</nobr>
                </li>
                <li v-show="query_get_item_small_classFunING">加载中...</li>
                <li v-if="!query_get_item_small_classFunING&&query_get_item_small_classData.length==0"><!--@click="choose_get_item_small_classFun('','')"-->
                  空
                </li>
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">物料编号</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_item_input_delete" @click="inputClear('query_get_item_input','yxItemClass','yxItemClassID')">X</div>
            <input type="text" v-model="query_get_item_input"
                   @click.stop="selectClick('query_get_item')">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_item">
                <li v-for="item in query_get_itemData" @click="choose_get_itemFun(item.name,item.value)">
                  <nobr>{{item.name}}</nobr>
                </li>
                <li v-show="query_get_itemFunING">加载中...</li>
                <li v-if="!query_get_itemFunING&&query_get_itemFunING&&query_get_itemData.length==0"><!--@click="choose_get_itemFun('','')"-->
                  空
                </li>
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">计划类别</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_plan_class_input_delete" @click="inputClear('query_get_plan_class_input','yxPlanClass','yxPlanClassID')">X</div>
            <input type="text" v-model="query_get_plan_class_input"
                   @click.stop="selectClick('query_get_plan_class')" readonly>
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_plan_class">
                <li v-for="item in query_get_plan_classData" @click="choose_get_plan_classFun(item.name,item.value)">
                  <nobr>{{item.name}}</nobr>
                </li>
                <li v-show="query_get_plan_classFunING">加载中...</li>
                <li v-show="!query_get_plan_classFunING&&query_get_plan_classData.length==0"><!--@click="choose_get_plan_classFun('','')"-->
                  空
                </li>
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">智能分类</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_item_category_input_delete" @click="inputClear('query_get_item_category_input','yxCategoryClass','yxCategoryClassID')">X</div>
            <input type="text" v-model="query_get_item_category_input"
                   @click.stop="selectClick('query_get_item_category')" readonly>
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_item_category">
                <li v-for="item in query_get_item_categoryData" @click="choose_query_get_item_categoryFun(item.name,item.value)">{{item.name}}</li>
                <li v-show="query_get_item_categoryFunING">加载中...</li>
                <li v-show="!query_get_item_categoryFunING&&query_get_item_categoryData.length==0"><!-- @click="query_get_item_categoryFun('')"-->
                  空
                </li>
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">采购员</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_buyer_input_delete" @click="inputClear('query_get_buyer_input','yxBuyerClass','yxBuyerClassID')">X</div>
            <input type="text" v-model="query_get_buyer_input"
                   @click.stop="selectClick('query_get_buyer')">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_buyer">
                <li v-for="item in query_get_buyerData" @click="choose_query_get_buyerFun(item.name,item.value)">
                  <nobr>{{item.value}} {{item.name}}</nobr>
                </li>
                <li v-show="query_get_buyerFunING">加载中...</li>
                <li v-show="!query_get_buyerFunING&&query_get_buyerData.length==0"><!-- @click="choose_query_get_buyerFun('','')"-->
                  空
                </li>
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">Sourcing</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_sourcing_input_delete" @click="inputClear('query_get_sourcing_input','yxSourcingClass','yxSourcingClassID')">X</div>
            <input type="text" v-model="query_get_sourcing_input"
                   @click.stop="selectClick('query_get_sourcing')">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_sourcing">
                <li v-for="item in query_get_sourcingData" @click="choose_query_get_sourcingFun(item.name,item.value)">
                  <nobr>{{item.value}} {{item.name}}</nobr>
                </li>
                <li v-show="query_get_sourcingFunING">加载中...</li>
                <li v-show="!query_get_sourcingFunING&&query_get_sourcingData.length==0"><!-- @click="choose_query_get_sourcingFun('','')"-->
                  空
                </li>
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">计划员</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_planner_input_delete" @click="inputClear('query_get_planner_input','yxPlannerClass','yxPlannerClassID')">X</div>
            <input type="text" v-model="query_get_planner_input"
                   @click.stop="selectClick('query_get_planner')">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_planner">
                <li v-for="item in query_get_plannerData" @click="choose_query_get_plannerFun(item.name,item.value)">
                  <nobr>{{item.value}} {{item.name}}</nobr>
                </li>
                <li v-show="query_get_plannerFunING">加载中...</li>
                <li v-show="!query_get_plannerFunING&&query_get_plannerData.length==0"><!--@click="choose_query_get_plannerFun('','')"-->
                  空
                </li>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div class="clearfix yx-marginRight30">
        <div class="fr">
          <button class="yx-btn-yellow" @click="query()">查询</button>
          <button class="yx-btn-grey" @click="clearCondition()">重置</button>
        </div>
      </div>
    </div>
    <div class="yx-content">
      <div class="yx-label">分类占比</div>
      <div class="yx-marginTop40 clearfix" v-show="!isLoading&&!isError">
        <div class="fl yx-pie" id="containerPie"></div>
        <div class="fr">
          <table class="yx-table yx-width1400">
            <tr>
              <th>类别</th>
              <th>物料种类</th>
              <th>种类占比</th>
              <th>物料总量</th>
              <th>数量占比</th>
              <th>物料价值</th>
              <th>价值占比</th>
            </tr>
            <tr>
              <td><i class="yx-ibox bg-ffbe4c"></i> A</td>
              <td>{{overviewInfoData.Class_A_item.item_kind | numberThousand}}</td>
              <td>{{overviewInfoData.Class_A_item.item_kind_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_A_item.item_quantity_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_A_item.quantity_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_A_item.item_value_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_A_item.value_ratio | numberPercent}}</td>
            </tr>
            <tr>
              <td><i class="yx-ibox bg-51d489"></i> B</td>
              <td>{{overviewInfoData.Class_B_item.item_kind | numberThousand}}</td>
              <td>{{overviewInfoData.Class_B_item.item_kind_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_B_item.item_quantity_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_B_item.quantity_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_B_item.item_value_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_B_item.value_ratio | numberPercent}}</td>
            </tr>
            <tr>
              <td><i class="yx-ibox bg-fc7470"></i> C</td>
              <td>{{overviewInfoData.Class_C_item.item_kind | numberThousand}}</td>
              <td>{{overviewInfoData.Class_C_item.item_kind_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_C_item.item_quantity_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_C_item.quantity_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_C_item.item_value_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_C_item.value_ratio | numberPercent}}</td>
            </tr>
            <tr>
              <td><i class="yx-ibox bg-56b5f1"></i> D</td>
              <td>{{overviewInfoData.Class_D_item.item_kind | numberThousand}}</td>
              <td>{{overviewInfoData.Class_D_item.item_kind_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_D_item.item_quantity_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_D_item.quantity_ratio | numberPercent}}</td>
              <td>{{overviewInfoData.Class_D_item.item_value_count | numberThousand}}</td>
              <td>{{overviewInfoData.Class_D_item.value_ratio | numberPercent}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="yx-marginTop40 loadingBox">
        <div class="loadding80" v-show="isLoading"></div>
        <div class="frame-noData" v-show="isError">暂无数据...</div>
      </div>

      <div class="yx-label yx-marginTop40 pr">分类细则
        <!--<button>导出结果</button>-->
      </div>
      <!--  <div class="yx-marginTop40 yx-select-change clearfix">&lt;!&ndash; v-show="!itemCategoeyIsLoading&&!itemCategoeyIsError"&ndash;&gt;
          <div class="yx-select-box"
               @click="yx_select_box_show==true?yx_select_box_show=false:yx_select_box_show=true">
            <input type="text" readonly v-model="itemClassSelectVal">
            <ul v-show="yx_select_box_show">
              <li @click="itemClassSelectVal='按类别筛选'">按类别筛选</li>
              <li @click="itemClassSelectVal='按物料筛选'">按物料筛选</li>
            </ul>
          </div>
          <div class="yx-singleChoosep fl" v-show="itemClassSelectVal=='按类别筛选'">
            <ul class="clearfix">
              <li class="radio" :class="{'liActived':chooseCategory=='all'}" @click="chooseCategory='all'">所有</li>
              <li class="radio" :class="{'liActived':chooseCategory=='A'}" @click="chooseCategory='A'">A类</li>
              <li class="radio" :class="{'liActived':chooseCategory=='B'}" @click="chooseCategory='B'">B类</li>
              <li class="radio" :class="{'liActived':chooseCategory=='C'}" @click="chooseCategory='C'">C类</li>
              <li class="radio" :class="{'liActived':chooseCategory=='D'}" @click="chooseCategory='D'">D类</li>
            </ul>
          </div>
          <div class="yx-singleChoose fl" v-show="itemClassSelectVal=='按物料筛选'">
                  <input type="text" @click="ll=!ll">
                  <transition name="fade">
                    <div class="yx-singleChoose_innerList" v-show="ll">
                      &lt;!&ndash; <li v-for="item in query_get_vendorData" @click="choose_query_get_vendorFun(item.name,item.value)">
                         <nobr>{{item.value}} {{item.name}}</nobr>
                       </li>&ndash;&gt;
                      <li @click="ll=!ll">sdfdsfds</li>
                      <li @click="ll=!ll">空oo</li>
                    </div>
                  </transition>
          </div>
        </div>-->

      <table class="yx-table yx-marginTop24 yx-widthP100" v-show="!itemCategoeyIsLoading&&!itemCategoeyIsError">
        <tr>
          <th>物料</th>
          <th>描述</th>
          <th>智能分类</th>
          <th>周转次数</th>
          <th>出库次数</th>
          <th>最近出库时间</th>
          <th>日平均需求</th>
          <th>日平均库存</th>
          <th>日平均入库</th>
          <th>计划类别</th>
        </tr>
    <!--    <tr v-for="(item,index) in itemCategoryData.items" id="index">-->
        <tr class="cursor" v-for="(item,index) in itemCategoryData.items" v-bind:class="{'trClickActive':tableTrClick==(index+1)}" @click="ff(index+1,item.ITEM,item.SEGMENT1);">
          <td class="textClick">{{item.SEGMENT1}}</td>
          <td>{{item.DESCRIPTION}}</td>
          <td>{{item.CLASS}}</td>
          <td>{{tofixeds(item.TURNOVER_YEAR)}}</td>
          <td>{{item.OUT_COUNT | numberThousand}}</td>
          <td>{{item.TRANSACTION_DATE}}</td>
          <td>{{tofixeds(item.OUT_QUANTITY) | numberThousand}}</td>
          <td>{{tofixeds(item.INVENTORY_QUANTITY) | numberThousand}}</td>
          <td>{{tofixeds(item.IN_QUANTITY) | numberThousand}}</td>
          <td>{{item.STRATEGY}}</td>
        </tr>
      </table>
      <div class="table-tr" v-show="itemCategoryData.pages>1&&!itemCategoeyIsLoading&&!itemCategoeyIsError">
        <div class="pageturn">
          共
          <em>{{itemCategoryData.total | numberThousand}}</em>
          条，第
          <em>{{itemCategoryData.page | numberThousand}}</em>
          /
          <em>{{itemCategoryData.pages | numberThousand}}</em>
          页，跳转到第
          <input type="text" class="pageturn-ipt" v-model="itemCategoryPage" value=""/>
          页
          <span class="page-turn" @click="itemCategory(itemCategoryPage)">跳转</span>
          <span class="page-first" @click="itemCategory(1)">首页</span>
          <span class="page-up" @click="itemCategoryData.page>1?itemCategory(itemCategoryData.page-1):1">上一页</span>
          <span class="page-down"
                @click="itemCategoryData.page<itemCategoryData.pages?itemCategory(itemCategoryData.page+1):''">下一页</span>
          <span class="page-last" @click="itemCategory(itemCategoryData.pages)">末页</span>
        </div>
      </div>
      <div class="yx-marginTop40 loadingBox">
        <div class="loadding80" v-show="itemCategoeyIsLoading"></div>
        <div class="frame-noData" v-show="itemCategoeyIsError">暂无数据...</div>
      </div>

      <div class="yx-marginTop40">
        <p class="yx-fontSize22 yx-marginBottom24 certainClassName">物料：<span
          class="">{{itemCategoryDetailCurrentItem}}</span></p>
        <div class="yx-cover" id="containerLine_item"
             v-show="!itemCategoeyDetailIsLoading&&!itemCategoryDetailIsError"></div>
        <div class="loadingBox">
          <div class="loadding80" v-show="itemCategoeyDetailIsLoading"></div>
          <div class="frame-noData" v-show="itemCategoryDetailIsError">暂无数据...</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import common from '../common/js/common'
  import bus from '../common/js/bus'
var yxBigClass='';
  var echarts = require('echarts');
  export default {
    data() {
      return {
        tableTrClick:1,
      	role_id:0,	//存储权限代号
        ll:false,
        disabledInput: true,
        colorList: [
          '#1fbb61', '#ffbe4c', '#fc7470', '#56b5f1', '#837df5', '#1acfc9', '#d275f4'
        ],
        optionPie: {
          tooltip: {
            trigger: 'item',
            formatter: function(params){
            	return params.seriesName + ":<br />"+
            				 params.name+":"+(params.value*100).toFixed(2)+"%";
            },
            confine: true
          },
          color: ['#ffbe4c', '#51d489', '#fc7470', '#56b5f1'],
          series: {
            name: '价值占比',
            type: 'pie',
            radius: '90%',
            center: ['50%', '50%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {value: [], name: 'A'},
              {value: [], name: 'B'},
              {value: [], name: 'C'},
              {value: [], name: 'D'},
            ],
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: 'white'
              },
              emphasis: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        },
        selectListName: [
          'query_get_item_big_class',
          'query_get_item_small_class',
          'query_get_item',
          'query_get_plan_class',
          'query_get_item_category',
          'query_get_buyer',
          'query_get_sourcing',
          'query_get_planner',
        ],
        query_get_item_big_class: false,
        query_get_item_big_class_input:'',
        query_get_item_big_class_input_id:'',
        query_get_item_big_class_input_boss:'',
        query_get_item_big_class_input_delete:false,
        query_get_item_big_classFunING:true,
        query_get_item_big_classData: [],//下拉框--库存大类

        query_get_item_small_class: false,
        query_get_item_small_class_input: '',
        query_get_item_small_class_input_id:'',
        query_get_item_small_class_input_boss:'',
        query_get_item_small_class_input_delete:false,
        query_get_item_small_classFunING:true,
        query_get_item_small_classData: [],//下拉框--库存小类

        query_get_item: false,
        query_get_item_input: '',
        query_get_item_input_id:'',
        query_get_item_input_boss:'',
        query_get_item_input_delete:false,
        query_get_itemFunING:true,
        query_get_itemData: [],//下拉框--物料编号

        query_get_plan_class: false,
        query_get_plan_class_input: '',
        query_get_plan_class_input_id:'',
        query_get_plan_class_input_boss:'',
        query_get_plan_class_input_delete:false,
        query_get_plan_classFunING:true,
        query_get_plan_classData: [],//下拉框--计划类别

        query_get_item_category: false,
        query_get_item_category_input: '',
        query_get_item_category_input_id:'',
        query_get_item_category_input_boss:'',
        query_get_item_category_input_delete:false,
        query_get_item_categoryFunING:true,
        query_get_item_categoryData: [],//下拉框--智能分类

        query_get_buyer: false,
        query_get_buyer_input: '',
        query_get_buyer_input_id:'',
        query_get_buyer_input_boss:'',
        query_get_buyer_input_delete:false,
        query_get_buyerFunING:true,
        query_get_buyerData: [],//下拉框--采购员

        query_get_sourcing: false,
        query_get_sourcing_input: '',
        query_get_sourcing_input_id:'',
        query_get_sourcing_input_boss:'',
        query_get_sourcing_input_delete:false,
        query_get_sourcingFunING:true,
        query_get_sourcingData: [],//下拉框--sourcing

        query_get_planner: false,
        query_get_planner_input: '',
        query_get_planner_input_id:'',
        query_get_planner_input_boss:'',
        query_get_planner_input_delete:false,
        query_get_plannerFunING:true,
        query_get_plannerData: [],//下拉框--计划员

        yx_select_box_show: false,
        isLoading: true,
        isError: false,
        overviewInfoData: {Class_A_item: {}, Class_B_item: {}, Class_C_item: {},Class_D_item:{}},//圆饼图+表数据
        itemCategoryPage: 1,
        itemCategoryData: {},
        itemCategoeyIsLoading: true,
        itemCategoeyIsError: false,
        itemCategoryDetailData: {},
        itemCategoeyDetailIsLoading: true,
        itemCategoryDetailIsError: false,
        itemClassSelectVal: "按类别筛选",//物料分类下拉框状态
        itemCategoryDetailCurrentItem: '',
        itemDetailFirstTime:true,

        overviewInfo_getSupplierData: {},//获取供应商
        supplier_overviewData: {},//供应商圆饼图
        supplierOverviewIsLoading: true,
        supplierOverviewIsError: false,
        supplierCategoryData: {},
        supplierCategoryIsLoading: true,
        supplierCategoryIsError: false,
        tofixeds:common.tofixeds,
        chooseCategory:'all'
      }
    },
    mounted() {
    	this.getRole_id();//权限操作
      this.query_get_item_big_classFun();//库存大类
      this.query_get_itemFun();//物料编号
      this.query_get_buyerFun();//采购员
      this.query_get_sourcingFun();//sourcing
      this.query_get_plannerFun();//计划员

      this.query_get_plan_classFun();//计划类别
      this.query_get_item_categoryFun();//智能分类
      this.overviewInfo_item();
      this.overviewInfo_item();
      this.itemCategory(this.itemCategoryPage);
    },
    activated(){
      var containerPie = echarts.init(document.getElementById('containerPie'));
      containerPie.resize()
      if(sessionStorage.yxBigClass){
        this.query_get_item_big_class_input=sessionStorage.yxBigClass;
        this.query_get_item_big_class_input_id=sessionStorage.yxBigClassID;
        this.query_get_item_small_classFun();
      }else{
        this.query_get_item_big_class_input='';
        this.query_get_item_big_class_input_id='';
      }
      if(sessionStorage.yxSmallClass){
        this.query_get_item_small_class_input=sessionStorage.yxSmallClass;
        this.query_get_item_small_class_input_id=sessionStorage.yxSmallClassID;
      }else{
        this.query_get_item_small_class_input='';
        this.query_get_item_small_class_input_id='';
      }
      if(sessionStorage.yxItemClass){
        this.query_get_item_input=sessionStorage.yxItemClass;
        this.query_get_item_input_id=sessionStorage.yxItemClassID;
      }else{
        this.query_get_item_input='';
        this.query_get_item_input_id='';
      }
      if(sessionStorage.yxPlanClass){
        this.query_get_plan_class_input=sessionStorage.yxPlanClass;
        this.query_get_plan_class_input_id=sessionStorage.yxPlanClassID;
      }else{
        this.query_get_plan_class_input='';
        this.query_get_plan_class_input_id='';
      }
      if(sessionStorage.yxCategoryClass){
        this.query_get_item_category_input=sessionStorage.yxCategoryClass;
        this.query_get_item_category_input_id=sessionStorage.yxCategoryClassID;
      }else{
        this.query_get_item_category_input='';
        this.query_get_item_category_input_id='';
      }
      if(sessionStorage.yxBuyerClass){
        this.query_get_buyer_input=sessionStorage.yxBuyerClass;
        this.query_get_buyer_input_id=sessionStorage.yxBuyerClassID;
      }else{
        this.query_get_buyer_input='';
        this.query_get_buyer_input_id='';
      }
      if(sessionStorage.yxSourcingClass){
        this.query_get_sourcing_input=sessionStorage.yxSourcingClass;
        this.query_get_sourcing_input_id=sessionStorage.yxSourcingClassID
      }else{
        this.query_get_sourcing_input='';
        this.query_get_sourcing_input_id='';
      }
      if(sessionStorage.yxPlannerClass){
        this.query_get_planner_input=sessionStorage.yxPlannerClass;
        this.query_get_planner_input_id=sessionStorage.yxPlannerClassID;
      }else{
        this.query_get_planner_input='';
        this.query_get_planner_input_id='';
      }
    },
    watch: {
      itemClassSelectVal: function () {
        if (this.itemClassSelectVal == '按供应商类别筛选') {
          this.itemCategory(this.itemCategoryPage);
        } else {
          this.itemCategory(this.itemCategoryPage);//需要改动，模糊搜索
        }
      },
      query_get_item_big_class_input: function () {//大类
        if (this.query_get_item_big_class_input == '') {
          this.query_get_item_big_class_input_id='';
          this.query_get_item_big_class_input_delete=false;
          this.disabledInput = true;
        } else {
          this.query_get_item_big_class_input_delete=true;
          this.disabledInput = false;
        }
        this.query_get_item_big_classFun();
      },
      query_get_item_small_class_input: function () {//小类
        if(this.query_get_item_small_class_input==''){
          this.query_get_item_small_class_input_id='';
          this.query_get_item_small_class_input_delete=false;
        }else{
          this.query_get_item_small_class_input_delete=true;
        }
        this.query_get_item_small_classFun();
      },
      query_get_item_input:function(){//物料编号
        if(this.query_get_item_input==''){
          this.query_get_item_input_id='';
          this.query_get_item_input_delete=false;
        }else{
        this.query_get_item_input_delete=true;
        }
        this.query_get_itemFun();
      },
      query_get_plan_class_input:function(){//计划类别
        if(this.query_get_plan_class_input==''){
          this.query_get_plan_class_input_id='';
          this.query_get_plan_class_input_delete=false;
        }else{
          this.query_get_plan_class_input_delete=true;
        }
      },
      query_get_item_category_input:function(){
        if(this.query_get_item_category_input==''){
          this.query_get_item_category_input_id='';
          this.query_get_item_category_input_delete=false;
        }else{
          this.query_get_item_category_input_delete=true;
        }
      },
      query_get_buyer_input: function () {//采购员
        if(this.query_get_buyer_input==''){
          this.query_get_buyer_input_id='';
          this.query_get_buyer_input_delete=false;
        }else{
          this.query_get_buyer_input_delete=true;
        }
        this.query_get_buyerFun();
      },
      query_get_sourcing_input: function () {//sourcing
        if(this.query_get_sourcing_input==''){
          this.query_get_sourcing_input_id='';
          this.query_get_sourcing_input_delete=false;
        }else{
          this.query_get_sourcing_input_delete=true;
        }
        this.query_get_sourcingFun()
      },
      query_get_planner_input: function () {//计划员
        if(this.query_get_planner_input==''){
          this.query_get_planner_input_id='';
          this.query_get_planner_input_delete=false;
        }else{
          this.query_get_planner_input_delete=true;
        }
        this.query_get_plannerFun()
      },
    },
    methods: {
      ff:function(index,id,name){
        if(this.tableTrClick!=index){
          this.tableTrClick=index;
          this.itemDetail(id,name);
        }else{
          this.tableTrClick=!this.tableTrClick;
        }
      },
    	/*权限控制*/
    	getRole_id:function(){
	    	this.role_id = localStorage.getItem("role_id");
	    },
      selectClick: function (x) {
        var _self = this;
        for (var i = 0; i < _self.selectListName.length; i++) {
          var yy = _self.selectListName[i];
          yy == x ? _self[x] = !_self[x] : _self[yy] = false;
        }
      },
      selectSlideUp2: function () {
        var _self = this;
        for (var i = 0; i < _self.selectListName.length; i++) {
          var yx = _self.selectListName[i];
          _self[yx] = false;
        }
      },
      /*置空*/
      clearCondition: function () {
        var _self=this;
        for(var i=0;i<_self.selectListName.length;i++){
          var select_input=_self.selectListName[i]+'_input';
          var select_id=_self.selectListName[i]+'_input_id';
          var select_boss=_self.selectListName[i]+'_input_boss';
          _self[select_input]='';
          _self[select_id]='';
          _self[select_boss]='';
        }
      },
      /*下拉框--库存大类*/
      query_get_item_big_classFun: function () {
        var _self = this;
        _self.query_get_item_big_classFunING=true;
        var yx_data = {
          "dim": this.query_get_item_big_class_input.indexOf(' ')>-1?this.query_get_item_big_class_input.split(' ')[1]:this.query_get_item_big_class_input
        }
        common.getData(-1,common.url_constitute.query_get_item_big_class, "post", yx_data, function (d) {
          _self.query_get_item_big_classFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_item_big_classData = d.data.result;
          }
        })
      },
      /*下拉框--库存大类--选择*/
      choose_get_item_big_classFun: function (name, num) {
        this.query_get_item_big_class_input = num+' '+name;
        this.query_get_item_big_class_input_id=num;
        this.selectSlideUp2();
        this.query_get_item_small_classFun();
        sessionStorage.yxBigClass=this.query_get_item_big_class_input;
        sessionStorage.yxBigClassID=this.query_get_item_big_class_input_id;
      },
      /*下拉框--库存小类*/
      query_get_item_small_classFun: function () {
        var _self = this;
        _self.query_get_item_small_classFunING=true;
        var yx_data = {
          "big_class": this.query_get_item_big_class_input.indexOf(' ')>-1?this.query_get_item_big_class_input.split(' ')[0]:this.query_get_item_big_class_input,
          "dim": this.query_get_item_small_class_input.indexOf(' ')>-1?this.query_get_item_small_class_input.split(' ')[1]:this.query_get_item_small_class_input
        }
        common.getData(-1,common.url_constitute.query_get_item_small_class, "post", yx_data, function (d) {
          _self.query_get_item_small_classFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_item_small_classData = d.data.result;
          }
        })
      },
      /*下拉框--库存小类--选择*/
      choose_get_item_small_classFun: function (name, num) {
        this.query_get_item_small_class_input = num+' '+name;
        this.query_get_item_small_class_input_id=num;
        this.selectSlideUp2();
        this.query_get_itemFun();
        sessionStorage.yxSmallClass=this.query_get_item_small_class_input;
        sessionStorage.yxSmallClassID=this.query_get_item_small_class_input_id;
      },
      /*下拉框--物料编号*/
      query_get_itemFun: function () {
        var _self = this;
        _self.query_get_itemFunING=true;
        var yx_data = {
          "big_class": this.query_get_item_big_class_input.indexOf(' ')>-1?this.query_get_item_big_class_input.split(' ')[0]:this.query_get_item_big_class_input,
          "small_class": this.query_get_item_small_class_input.indexOf(' ')>-1?this.query_get_item_small_class_input.split(' ')[0]:this.query_get_item_small_class_input,
          "dim": this.query_get_item_input
        }
        common.getData(-1,common.url_constitute.query_get_item, "post", yx_data, function (d) {
          _self.query_get_itemFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_itemData = d.data.result;
          }
        })
      },
      /*下拉框--物料编号--选择*/
      choose_get_itemFun: function (name,num) {
        this.query_get_item_input = name;
        this.query_get_item_input_id=num;
        this.selectSlideUp2();
        sessionStorage.yxItemClass=this.query_get_item_input;
        sessionStorage.yxItemClassID=this.query_get_item_input_id;
      },
      /*下拉框--计划类别*/
      query_get_plan_classFun: function () {
        var _self = this;
        _self.query_get_plan_classFunING=true;
        var yx_data = {};
        common.getData(-1,common.url_constitute.query_get_plan_class, "post", yx_data, function (d) {
          _self.query_get_plan_classFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_plan_classData = d.data.result;
          }
        })
      },
      /*下拉框--计划类别--选择*/
      choose_get_plan_classFun: function (name, num) {
        this.query_get_plan_class_input = name;
        this.query_get_plan_class_input_id=num;
        this.selectSlideUp2();
        sessionStorage.yxPlanClass=this.query_get_plan_class_input;
        sessionStorage.yxPlanClassID=this.query_get_plan_class_input_id;
      },
      /*下拉框--智能分类*/
      query_get_item_categoryFun: function () {
        var _self = this;
        _self.query_get_item_categoryFunING=true;
        var yx_data = {
          "dim": this.query_get_item_category_input == '' ? '' : this.query_get_item_category_input,
        };
        common.getData(-1,common.url_constitute.query_get_item_category, "post", yx_data, function (d) {
          _self.query_get_item_categoryFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_item_categoryData = d.data.result;
          }
        })
      },
      /*下拉框--智能分类--选择*/
      choose_query_get_item_categoryFun: function (name,num) {
        this.query_get_item_category_input = name;
        this.query_get_item_category_input_id=num;
        this.selectSlideUp2();
        sessionStorage.yxCategoryClass=this.query_get_item_category_input;
        sessionStorage.yxCategoryClassID=this.query_get_item_category_input_id;
      },
      /*下拉框--采购员*/
      query_get_buyerFun: function () {
        var _self = this;
        _self.query_get_buyerFunING=true;
        var yx_data = {
          "dim": this.query_get_buyer_input.indexOf(' ')>-1?this.query_get_buyer_input.split(' ')[1]:this.query_get_buyer_input,
        };
        common.getData(-1,common.url_constitute.query_get_buyer, "post", yx_data, function (d) {
          _self.query_get_buyerFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_buyerData = d.data.result;
          }
        })
      },
      /*下拉框--采购员--选择*/
      choose_query_get_buyerFun: function (name, num) {
        this.query_get_buyer_input = num+' '+name;
        this.query_get_buyer_input_id=num;
        this.selectSlideUp2();
        sessionStorage.yxBuyerClass=this.query_get_buyer_input;
        sessionStorage.yxBuyerClassID=this.query_get_buyer_input_id;
      },
      /*下拉框--sourcing*/
      query_get_sourcingFun: function () {
        var _self = this;
        _self.query_get_sourcingFunING=true;
        var yx_data = {
          "dim": this.query_get_sourcing_input.indexOf(' ')>-1 ?this.query_get_sourcing_input.split(' ')[1]:this.query_get_sourcing_input,
        };
        common.getData(-1,common.url_constitute.query_get_sourcing, 'post', yx_data, function (d) {
          _self.query_get_sourcingFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_sourcingData = d.data.result;
          }
        });
      },
      /*下拉框--sourcing--选择*/
      choose_query_get_sourcingFun: function (name, num) {
        this.query_get_sourcing_input = num+' '+name;
        this.query_get_sourcing_input_id=num;
        this.selectSlideUp2();
        sessionStorage.yxSourcingClass=this.query_get_sourcing_input;
        sessionStorage.yxSourcingClassID=this.query_get_sourcing_input_id;
      },
      /*下拉框--计划员*/
      query_get_plannerFun: function () {
        var _self = this;
        _self.query_get_plannerFunING=false;
        var yx_data = {
          "dim": this.query_get_planner_input.indexOf(' ')>-1 ? this.query_get_planner_input.split(' ')[1]:this.query_get_planner_input,
        };
        common.getData(-1,common.url_constitute.query_get_planner, 'post', yx_data, function (d) {
          _self.query_get_plannerFunING=true;
          if (d.data.code == 1024) {
            _self.query_get_plannerData = d.data.result;
          }
        })
      },
      /*下拉框--计划员--选择*/
      choose_query_get_plannerFun: function (name, num) {
        this.query_get_planner_input = num+' '+name;
        this.query_get_planner_input_id=num;
        this.selectSlideUp2();
        sessionStorage.yxPlannerClass=this.query_get_planner_input;
        sessionStorage.yxPlannerClassID=this.query_get_planner_input_id;
      },
      /*查询*/
      query:function(){
        this.query_get_item_big_class_input_boss=this.query_get_item_big_class_input_id;
        this.query_get_item_small_class_input_boss=this.query_get_item_small_class_input_id;
        this.query_get_item_input_boss=this.query_get_item_input_id;
        this.query_get_item_category_input_boss=this.query_get_item_category_input_id;
        this.query_get_plan_class_input_boss=this.query_get_plan_class_input_id;
        this.query_get_sourcing_input_boss=this.query_get_sourcing_input_id;
        this.query_get_planner_input_boss=this.query_get_planner_input_id;
        this.query_get_buyer_input_boss=this.query_get_buyer_input_id;

        this.itemDetailFirstTime=true;
        this.itemCategoryPage=1;
        this.itemCategoryDetailCurrentItem='';
        this.itemCategoeyDetailIsLoading = true;
        this.overviewInfo_item();
        this.itemCategory(1);
      },
      /*INPUT自带的×*/
      inputClear:function(who,sessionWho,sessionID){
        var _self=this;
        _self[who]='';
        sessionStorage[sessionWho]='';
        sessionStorage[sessionID]='';
        var whoID=who+'_boss';
        _self[whoID]='';
        if(who=='query_get_item_big_class_input'){
          _self.query_get_item_small_class_input='';
          _self.query_get_item_small_class_input_id='';
          sessionStorage.yxSmallClass='';
          sessionStorage.yxSmallClassID='';
        }
      },

      /*物料分类--智能分类*/
      overviewInfo_item: function () {
        var _self = this;
        _self.isLoading = true;
        var yx_data = {
          "category": this.query_get_item_category_input_boss,
          "item": this.query_get_item_input_boss,
          "plan_class": this.query_get_plan_class_input_boss,
          "sourcing": this.query_get_sourcing_input_boss,
          "item_big_class": this.query_get_item_big_class_input_boss,
          "item_small_class": this.query_get_item_small_class_input_boss,
          "planner": this.query_get_planner_input_boss,
          "buyer": this.query_get_buyer_input_boss
        };
        /*物料分类圆饼图*/
        common.getData(0,common.url_constitute.item_overview, "post", yx_data, function (d) {
          _self.overviewInfoData = d.data.overview_info;
          _self.isLoading = false;
          if (d.data.code == 1024) {
            var optionPie_item = _self.optionPie;
            if(_self.overviewInfoData.Class_A_item.item_kind<1&&_self.overviewInfoData.Class_B_item.item_kind<1&&_self.overviewInfoData.Class_C_item.item_kind<1&&_self.overviewInfoData.Class_D_item.item_kind<1){
              _self.isError = true;
            }else{
              _self.isError = false;
              optionPie_item.series.data[0].value = _self.overviewInfoData.Class_A_item.value_ratio;
              optionPie_item.series.data[1].value = _self.overviewInfoData.Class_B_item.value_ratio;
              optionPie_item.series.data[2].value = _self.overviewInfoData.Class_C_item.value_ratio;
              optionPie_item.series.data[3].value = _self.overviewInfoData.Class_D_item.value_ratio;
              var containerPie = echarts.init(document.getElementById('containerPie'));
              containerPie.setOption(optionPie_item,true);
              window.addEventListener("resize",function(){
                containerPie.resize();
              })
            }
          }else if(d.data.code==9007){
            _self.isError = true;
          }
        });
      },
      /*物料分类--分类细则表*/
      itemCategory: function (page) {
        var _self = this;
        _self.itemCategoeyIsLoading = true;
        var yx_data = {
          "category": this.query_get_item_category_input_boss,
          "item": this.query_get_item_input_boss,
          "plan_class": this.query_get_plan_class_input_boss,
          "sourcing": this.query_get_sourcing_input_boss,
          "item_big_class": this.query_get_item_big_class_input_boss,
          "item_small_class": this.query_get_item_small_class_input_boss,
          "planner": this.query_get_planner_input_boss,
          "buyer": this.query_get_buyer_input_boss,
          "page": page
        }
        common.getData(1,common.url_constitute.item_category, "post", yx_data, function (d) {
          _self.itemCategoeyIsLoading = false;
          if (d.data.code == 1024) {
            _self.itemCategoryData = d.data.item_inventory;
            if(_self.itemCategoryData.total<1){
              _self.itemCategoeyIsError = true;
            }else{
              _self.itemCategoeyIsError = false;
              if(_self.itemCategoryData.page==1&&_self.itemDetailFirstTime){
                _self.itemDetail(_self.itemCategoryData.items[0].ITEM,_self.itemCategoryData.items[0].SEGMENT1);
              }
            }
          }else if(d.data.code==9007){
            _self.itemCategoeyIsError = true;
          }
        });
      },
      /*物料分类--分类细则--详情图*/
      itemDetail: function (id,name) {/*物料分类详情数据图*/
        var _self = this;
        _self.itemCategoeyDetailIsLoading = true;
        _self.itemCategoryDetailCurrentItem = '';
        _self.itemDetailFirstTime=false;
        _self.itemCategoryDetailCurrentItem = name;
        var yx_data = {
          "item": id
        }
        common.getData(3,common.url_constitute.item_detail, 'post', yx_data, function (d) {
          _self.itemCategoeyDetailIsLoading = false;
          if (d.data.code == 1024) {
            _self.itemCategoryDetailData = d.data.item_detail_info;
            if(_self.itemCategoryDetailData.TRANSACTION_DATE.length==0){
              _self.itemCategoryDetailIsError = true;
            }else{
              _self.itemCategoryDetailIsError = false;
              var itemDetailBarLine_option ={
                tooltip: {
                  trigger: 'axis',
                },
                legend: {
                  data: ["日初库存", '入库量', '出库量', '需求量', '采购价格'],
                },
                grid: {
                  show: true,
                  top: '50',
                  left: '4%',
                  right: '4%',
                  bottom: '50',
                  borderWidth: 0
                },
                dataZoom: [{
                  show: true,
                  height: 20,
                  xAxisIndex: [0],
                  bottom: 0,
                  start: 0,
                  end: 100,
                  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                  handleSize: '110%',
                  handleStyle: {
                    color: "#d3dee5",

                  },
                  textStyle: {
                    color: "#fff"
                  },
                  borderColor: "#90979c"
                }, {
                  type: 'inside',
                  show: true,
                  height: 15,
                  start: 1,
                  end: 35
                }],
                xAxis: {
                  type: 'category',
                  data: common.setDateList(_self.itemCategoryDetailData.TRANSACTION_DATE),
                  name: '时间',
                },
                yAxis: [{
                  name: '数量',
                  type: 'value',
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#eee'
                    }
                  },
                  axisLabel: {
                    formatter: function (params) {
                      return common.wan(params);
                    }
                  }
                },{
                  type: 'value',
                  name: '采购价格（元）',
                  splitLine: {
                    show: false,
                  },
                  axisLabel: {
                    formatter: function (v) {
                      return common.wan(v);
                    }
                  }
                }],
                series: []
              };
              var optionSpecial = [{
                name: '日初库存',
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: '#ffbe4c'
                  }
                },
                stack: '量',
                yAxisIndex: 0,
                data: _self.itemCategoryDetailData.INVENTORY_QUANTITY
              }, {
                name: '入库量',
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: '#56b5f1'
                  }
                },
                yAxisIndex: 0,
                stack: '量',
                data: _self.itemCategoryDetailData.IN_QUANTITY
              }, {
                name: '出库量',
                type: 'line',
                normal: {
                  color: '#fc7470'
                },
                yAxisIndex: 0,
                data: _self.itemCategoryDetailData.OUT_QUANTITY
              }, {
                name: '需求量',
                type: 'line',
                normal: {
                  color: '#51d489'
                },
                yAxisIndex: 0,
                data: _self.itemCategoryDetailData.OUT_QUANTITY
              }, {
                name: '采购价格',
                type: 'scatter',
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: '#3ED7F2'
                  }
                },
                data: _self.itemCategoryDetailData.PRICE
              }]
              itemDetailBarLine_option.series = optionSpecial;
              var containerLineItem = echarts.init(document.getElementById('containerLine_item'));
              containerLineItem.setOption(itemDetailBarLine_option,true);
              window.addEventListener("resize",function(){
                containerLineItem.resize();
              })
            }
          }else if(d.data.code==9007){
            _self.itemCategoryDetailIsError = true;
          }
        })
      },
    },
  }
</script>

<style>
  @import "../common/css/base.css";
  @import "../common/css/yx.less";
</style>
